<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>疫苗接种预约系统</title>
  </head>
  <body>
      <h1>疫苗接种预约系统</h1>
      <button><a href="add.jsp">添加预约</a></button>
      <form action="SelectServlet" method="post">
          <table>
              <tr>
                  <td>身份证号：<input type="text" name="cardId"></td>
                    <select name="status">
                        <option value="0">预约</option>
                        <option value="1">已接种</option>
                    </select>
                  </td>
                  <td><button type="submit">搜索</button></td>
              </tr>
          </table>
      </form>
      <table border="1">
        <tr>
          <th>预约人姓名</th>
          <th>预约人身份证号</th>
          <th>接种状态</th>
          <th>预约接种日期</th>
          <th>操作</th>
        </tr>
        <c:forEach items="${list}" var="b">
          <tr>
            <td>${b.userName}</td>
            <td>${b.cardId}</td>
            <td>${b.status==1?"已接种":"预约"}</td>
            <td>${b.bookingDate}</td>
            <td><a class="change" status="${b.status}" bid="${b.id}" href="javascript:void(0)">完成接种</a>
              <a href="#" onclick="del(${b.id})">删除</a>
            </td>
          </tr>
        </c:forEach>
      </table>
      <p style="color: black">${info}</p>
      <a href="ListServlet?pageNo=1">首页</a>
      <a href="ListServlet?pageNo=${pageNo+1}">下一页</a>
      <a href="ListServlet?pageNo=${pageNo-1}">上一页</a>
  </body>
<script src="js/jquery-1.8.3.js"></script>
<script>
    function del(id) {
        if (confirm("确认要删除吗？")){
            $.post("DeleteServlet","id="+id,function (date) {
            if (date>0){
                alert("删除成功！")
                location.href = 'ListServlet';
            }
            })
        }
    }
    $(".change").click(function () {
        var id = $(this).attr("bid");
        var status = $(this).attr("status");
        var node = $(this).parent().prev().prev();
        if (status > 0){
            alert("该人员已接种！");
        }else {
            $.post("UpdateServlet",{id:id},function (data) {
                alert(data);
                node.text("已接种！");
            })
        }
    })
</script>
</html>